<template>
    <div class="assets">
        <div class="assets_top">
            <div class="money">
                <div>
                    <h5>总资产(元)</h5>
                    <span>{{loginuser.now_money}}</span>
                </div>
                <span class="tomoney">充值</span>
            </div>
            <ul>
                <li><h5>累计充值(元)</h5><span>{{loginuser.recharge}}</span></li>
                <li><h5>累计消费(元)</h5><span>{{loginuser.pay_count}}</span></li>
            </ul>
        </div>
        <div class="record">
            <van-grid>
                <van-grid-item icon="records" text="账单记录" />
                <van-grid-item icon="bill-o" text="消费记录" />
                <van-grid-item icon="gold-coin-o" text="充值记录" />
                <van-grid-item icon="gem-o" text="积分中心" />
            </van-grid>
        </div>
    </div>
</template>
<script>
import{mapGetters} from "vuex"
export default {
    computed:{
        ...mapGetters(["loginuser"])
    }
}
</script>
<style lang="less">
.assets{
    .assets_top{
        margin: 20px 20px 0px 20px;
        background: linear-gradient(90deg,#f33b2b 0,#f36053);
        height: 165px;
        border-radius: 10px;
        .money{
            display: flex;
            color: #fff;
            div{
                flex: 1;
                padding: 20px;
                h5{
                    font-size: 13px;
                    color: rgba(255,255,255,0.7);
                    padding-bottom: 10px;
                }
                span{
                    font-size: 36px;
                }
            }
            .tomoney{
                margin: 20px 20px 0px 0px;
                padding: 5px 20px;
                height: 15px;
                line-height: 15px;
                background: #fff;
                color: #f36053;
                font-size: 14px;
                border-radius: 20px;
            }
        }
        ul{
            display: flex;
            li{
                flex: 1;
                padding: 0px 20px;
                h5{
                    font-size: 13px;
                    color: rgba(255,255,255,0.7);
                    padding-bottom: 10px;
                }
                span{
                    color: #fff;
                }
            }
        }
    }
}
.record{
    border-bottom: 1px solid #ebedf0;
    .van-grid-item__content::after,.van-hairline--top::after{
        border: none;
    }
    .van-grid-item__icon{
        text-align: center;
        color: #f36053;
        font-size: 28px;
    }
}
</style>


